<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>okbuy</title>
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" type="text/css" href="css/magnifier.css">
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/jquery.cookie.js"></script>

    <script type="text/javascript">
        // 我就是想测试一下git提交
        //我还想试试111
        //第三次
        //第四次
        //第五次
        $(function() {
            $.getJSON("json/index.json", function(res) {
                //console.log(res.listPages);
                var result = res.listPages;
                var url = getRequest();
                var id = url.id;
                var data = {};

                //遍历
                $.each(result, function(i, field) {
                    //创建一个li标签
                    if (id == field.id) {
                        data = result[i];

                    }
                });

                if (data) {
                    $('.small-img img').attr('src', data.image1);
                    $('.tit span').html(data.goodsName);
                    $('.go input').attr('id', data.id);
                    $('.color p span img').attr('src', data.image1);
                    //console.log(data.id);
                }
            })
        });

        function getRequest() {
            var url = location.search; //获取url中"?"符后的字串 
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
    </script>
    <script src="js/picMove.js"></script>
    <script type="text/javascript" src="js/magnifier.js"></script>
    <script src="js/index.js"></script>
    <script type="text/javascript" src="js/detail.js"></script>
    <script type="text/javascript" src="js/goodsCart.js"></script>
</head>

<body>
    <!-- nav begin-->
    <div class="nav">
        <div class="nav_top">
            <!-- 登录和注册 -->
            <ul class="ul_left">
                <li><a href="login.html">登录</a><span>|</span></li>
                <li><a href="register.html">注册</a></li>
            </ul>
            <!-- 顶部导航栏下拉菜单 -->
            <ul class="ul_right">
                <li>
                    <a href="javascript:;">我的好乐买</a><span></span><i>|</i>
                    <div class="ul_right_1">
                        <p class="change"><a href="javascript:;">我的订单</a></p>
                        <p><a href="javascript:;">我的收藏</a></p>
                        <p><a href="javascript:;">我的优惠券</a></p>
                    </div>
                </li>
                <li>
                    <a href="javascript:;">手机好乐买</a><span></span><i>|</i>
                    <div class="ul_right_2">
                        <img src="http://0.js.lx.okbuycdn.com/resources/images/v6/common/appqcode_2.png">
                        <p>下载客户端</p>
                    </div>
                </li>
                <li>
                    <a href="javascript:;">关注好乐买</a><span></span><i>|</i>
                    <div class="ul_right_3">
                        <div class="p1">
                            <img src="http://0.js.lx.okbuycdn.com/resources/images/v6/common/weixinqcode.png">
                            <p>微信公众号</p>
                        </div>
                        <div class="p2">
                            <img src="http://0.js.lx.okbuycdn.com/resources/images/v6/common/weixinqcode.png">
                            <p>微信福利好</p>
                        </div>
                    </div>
                </li>

                <li>
                    <a href="javascript:;">客户服务</a><span></span><i>|</i>
                    <div class="ul_right_4">
                        <p><a href="javascript:;">联系客服</a></p>
                        <p><a href="javascript:;">帮助中心</a></p>
                        <p><a href="javascript:;">意见建议</a></p>
                    </div>
                </li>

                <li>
                    <a href="javascript:;">公告</a><span></span><i id="last">|</i>
                    <div class="ul_right_5">
                        <p><a href="javascript:;">运费规则调整公告（2017年6月1日执行）</a></p>
                        <p><a href="javascript:;">户外春夏好货推荐</a></p>
                    </div>
                </li>

            </ul>
        </div>
        <div class="nav_mid">
            <!-- logo -->
            <div class="nav_mid_l">
                <a href="javascript:;">
                    <img src="img/login_new_logo.png" alt="logo">
                </a>
            </div>
            <!-- search -->
            <div class="nav_mid_c">
                <form action="" method="get">
                    <input type="text" id="search" value="" placeholder="男士polo衫">
                    <input type="button" id="btn" value="">
                    <span>
					<a href="javascript:;">跑步鞋</a>
					<a href="javascript:;">男休闲鞋</a>
					<a href="javascript:;">阿迪达斯</a>
					<a href="javascript:;">耐克</a>
					<a href="javascript:;">牛仔裤</a>
					<a href="javascript:;">匡威</a>
					</span>
                </form>
            </div>
            <!-- cart -->
            <div class="nav_mid_r">
                <a href="shoppingCart.html">
                    <span>去购物车结算<b id="goodsNum">0</b></span>
                </a>
                <!-- 加入购物车的隐藏页面 -->
                <div class="addCart">
                    <!-- 动态加载数据 -->
                </div>
            </div>
        </div>
        <div class="nav_bot">
            <ul class="warp">
                <li><a href="javascript:;" id="warp_li_1">首页</a></li>
                <li>
                    <a href="javascript:;" id="warp_li_2"></a>
                </li>
                <li><a href="javascript:;">运动生活</a>
                    <div class="warp_list_3">
                        <div class="column_1">
                            <h3>品牌导购</h3>
                            <div class="row_1">
                                <h3>运动鞋</h3>
                                <p class="shoes"></p>
                            </div>
                            <div class="row_2">
                                <h3>运动服</h3>
                                <p class="clothes"></p>
                            </div>
                            <div class="row_3">
                                <h3>运动周边</h3>
                                <p class="around"></p>
                            </div>
                        </div>
                        <div class="column_2">
                            <h3>运动导购</h3>
                        </div>
                        <div class="column_3">
                            <h3>品牌导购</h3>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;">户外鞋服</a>
                    <div class="warp_list_4">
                        <div class="column_4_1">
                            <h3>户外服饰</h3>
                            <div class="row_4_1">
                                <h3>男装</h3>
                                <p class="men"></p>
                            </div>
                            <div class="row_4_1">
                                <h3>女装</h3>
                                <p class="women"></p>
                            </div>
                        </div>
                        <div class="column_4_2">
                            <h3>户外生活</h3>
                        </div>
                        <div class="column_4_3">
                            <h3>品牌导购</h3>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;">男女名鞋</a>
                    <div class="warp_list_5">
                        <div class="column_5_1">
                            <h3>名鞋</h3>
                            <div class="row_5_1">
                                <h3>夏款</h3>
                                <p class="summer"></p>
                            </div>
                            <div class="row_5_1">
                                <h3>秋冬款</h3>
                                <p class="winter"></p>
                            </div>
                        </div>
                        <div class="column_5_2">
                            <h3>名鞋导航</h3>
                        </div>
                        <div class="column_5_3">
                            <h3>品牌导购</h3>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;">快乐儿童</a>
                    <div class="warp_list_6">
                        <div class="column_6_1">
                            <h3>品类导航</h3>
                            <div class="row_6_1">
                                <h3>儿童鞋类</h3>
                                <p class="child_clothes"></p>
                            </div>
                            <div class="row_6_1">
                                <h3>儿童服饰</h3>
                                <p class="child_shoes"></p>
                            </div>
                        </div>
                        <div class="column_6_2">
                            <h3>儿童生活</h3>
                        </div>
                        <div class="column_6_3">
                            <h3>品牌导购</h3>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="javascript:;" id="warp_li_3">
                        <img src="http://i.okaybuy.cn/images/multipic/new/201701/7d/7de29d4226bbf3855eb7eca34a680cc5.gif" alt=""> 全球购
                    </a>
                </li>
                <li><a href="javascript:;">家居包配</a></li>
            </ul>

        </div>
    </div>
    <!-- nav over-->


    <!-- proDetail begin -->
    <div class="proDetail">
        <!-- 购买部分 -->
        <div class="proDetail_top">
            <!-- 顶部导航 -->
            <div class="proDetail_top_nav">
                <p>
                    <span><a href="javascript:;">好乐买</a></span> >
                    <span><a href="javascript:;">运动鞋</a></span> >
                    <span><a href="javascript:;">ADIDAS网球鞋</a></span> >
                    <span><a href="javascript:;">ADIDAS撞色百搭透气休闲中帮网球鞋AW5064</a></span>
                </p>
            </div>

            <div class="magnifier" id="magnifier1">
                <div class="magnifier-container">
                    <div class="images-cover"></div>
                    <!--当前图片显示容器-->
                    <div class="move-view"></div>
                    <!--跟随鼠标移动的盒子-->
                </div>
                <div class="magnifier-assembly">
                    <div class="magnifier-btn">
                        <span class="magnifier-btn-left">&lt;</span>
                        <span class="magnifier-btn-right">&gt;</span>
                    </div>
                    <!--按钮组-->
                    <div class="magnifier-line">
                        <ul class="clearfix animation03">
                            <li>
                                <div class="small-img">
                                    <img src="http://0.image.kw.okbuycdn.com/nbn/s270_270/static/1fba01db397e95f3b7758e30b7c45bb5.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="http://0.image.kw.okbuycdn.com/nbn/s270_270/static/1fba01db397e95f3b7758e30b7c45bb5.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="http://0.image.kw.okbuycdn.com/nbn/s270_270/static/1fba01db397e95f3b7758e30b7c45bb5.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="http://0.image.kw.okbuycdn.com/nbn/s270_270/static/1fba01db397e95f3b7758e30b7c45bb5.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="http://0.image.kw.okbuycdn.com/nbn/s270_270/static/1fba01db397e95f3b7758e30b7c45bb5.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="http://0.image.kw.okbuycdn.com/nbn/s270_270/static/1fba01db397e95f3b7758e30b7c45bb5.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="http://0.image.kw.okbuycdn.com/nbn/s270_270/static/1fba01db397e95f3b7758e30b7c45bb5.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="http://0.image.kw.okbuycdn.com/nbn/s270_270/static/1fba01db397e95f3b7758e30b7c45bb5.jpg" />
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!--缩略图-->
                </div>
                <div class="magnifier-view"></div>
                <!--经过放大的图片显示容器-->
            </div>

            <div class="proDetail_top_det">
                <!-- 标题部分 -->
                <p class="tit">
                    <span class="tit_l"></span>
                </p>
                <!-- 详情信息 -->
                <div class="info">
                    <div class="price">
                        <span>好乐买价</span>
                        <span>￥</span>
                        <span>255</span>
                        <span><del>￥599</del></span>
                        <span>4.3折</span>
                        <span>累计评价:<b>10</b></span>
                    </div>
                    <div class="timer">
                        <div class="title_4_detail"></div>
                    </div>
                    <div class="activity">
                        <span>活动</span>
                        <span>阿迪达斯运动鞋专场</span>
                        <span><a href="javascript:;">进入专场></a></span>
                    </div>
                </div>
                <div class="color">
                    <div>颜色</div>
                    <!-- 动态生成  添加src -->
                    <p><span><img ><i></i></span>
                    </p>
                </div>
                <div class="size">
                    <p>尺寸<span>尺码对照表</span></p>
                    <ul>
                        <li>39</li>
                        <li>40</li>
                        <li>41</li>
                        <li>41.5</li>
                        <li>42</li>
                    </ul>
                </div>
                <div class="number">
                    <p>数量</p>
                    <ul>
                        <li><a href="javascript:;" id="sub">-</a></li>
                        <li><input type="text" id="ipt" value="1"></li>
                        <li><a href="javascript:;" id="add">+</a></li>
                    </ul>

                </div>
                <div class="go">
                    <input type="button" name="" value="加入购物车">
                    <a href="javascript:;">收藏该商品</a>
                </div>
                <div class="pic"></div>
            </div>

        </div>
        <div class="detail_nav_out">
            <div class="detail_nav">
                <ul>
                    <li><a href="javascript:;">商品详情</a></li>
                    <li><a href="javascript:;">评价晒单</a></li>
                    <li><a href="javascript:;">售后保障</a></li>
                    <li><a href="javascript:;">好乐买服务</a></li>
                </ul>
            </div>
        </div>
        <div class="goods">
            <img src="img/1.jpg">
            <img src="img/2.jpg">
            <img src="img/3.jpg">
            <img src="http://0.image.kw.okbuycdn.com/images/multipic/4/20161102/2f93ac3027c158ef4185254214041e87.jpg">
            <img src="http://0.image.kw.okbuycdn.com/images/multipic/4/20161102/512e2707a051b0b9d51e0c769e260daa.jpg">
            <img src="http://0.image.kw.okbuycdn.com/images/multipic/4/20161102/53c6764c60f0ed718bad58a5a91f443c.jpg">
            <img src="http://0.image.kw.okbuycdn.com/images/multipic/4/20161102/badf0d492d64ac577ce01b2f677bee59.jpg">
            <img src="http://0.image.kw.okbuycdn.com/images/multipic/4/20161102/b3b494e5a5f8b2fadc5fdb5dfd1453da.jpg">
            <img src="http://0.image.kw.okbuycdn.com/images/multipic/4/20161102/b3b494e5a5f8b2fadc5fdb5dfd1453da.jpg">
            <img src="http://0.js.lx.okbuycdn.com/resources/images/v6/product/detail/shopservice_defult.jpg">
        </div>
    </div>
    <!-- proDetail over -->


    <!-- footer begin -->
    <div class="footer">
        <div class="code">
            <div class="phone">
                <img src="http://0.js.lx.okbuycdn.com/resources/images/v6/common/code_client.png">
                <p>好乐买手机客户端</p>
            </div>
            <div class="weixin1">
                <img src="http://0.js.lx.okbuycdn.com/resources/images/v6/common/code_client.png">
                <p>好乐买微信公众号</p>
            </div>
            <div class="weixin2">
                <img src="http://0.js.lx.okbuycdn.com/resources/images/v6/common/code_client.png">
                <p>好乐买微信福利号</p>
            </div>
        </div>
        <div class="list">
            <ul>
                <li>
                    <p class="title">购物指南</p>
                    <p><a href="javascript:;">购物流程</a></p>
                    <p><a href="javascript:;">订购方式</a></p>
                    <p><a href="javascript:;">常见问题</a></p>
                </li>
                <li>
                    <p class="title">配送方式</p>
                    <p><a href="javascript:;">快递配送</a></p>
                    <p><a href="javascript:;">配送时间</a></p>
                </li>
                <li>
                    <p class="title">支付方式</p>
                    <p><a href="javascript:;">支付方式</a></p>
                    <p><a href="javascript:;">代金券</a></p>
                </li>
                <li>
                    <p class="title">售后服务</p>
                    <p><a href="javascript:;">退换货政策</a></p>
                    <p><a href="javascript:;">退款说明</a></p>
                    <p><a href="javascript:;">联系客服</a></p>
                </li>
            </ul>
        </div>
        <div class="pic">
            <p class="images">
                <a href="javascript:;">
                    <img src="http://0.js.lx.okbuycdn.com/resources/images/v6/index/okbuy1-03.png" alt=""></a>
                <a href="javascript:;"><img src="http://0.js.lx.okbuycdn.com/resources/images/v6/index/okbuy1-05.png" alt=""></a>
                <a href="javascript:;"><img src="http://i.okaybuy.cn/images/multipic/new/201508/90/902c39b52902b3bd4ab500babad4e14a.png" alt=""></a>
                <a href="javascript:;"><img src="http://0.js.lx.okbuycdn.com/resources/images/v6/index/bjwj.jpg" alt=""></a>
            </p>
            <p class="words">
                <a href="javascript:;">公司介绍</a>|
                <a href="javascript:;">加入我们</a>|
                <a href="javascript:;">联系我们</a>|
                <a href="javascript:;">友情链接</a>|
            </p>
        </div>
    </div>
    <!-- footer over -->
    <!-- bottom -->
    <div class="bottom">天津好乐买信息技术有限公司 Copyright © 2007-2017 OkBuy.com All Rights Reserved <a href="javascript:;">津ICP备16005872号-1</a> 京公网安备110105006859   客服电话：400-8610-400
    </div>

</body>

</html>